<template>
  <div>
    <div class="box">
      <div style="height: 100%;width: 60px;">
        <div v-show="$store.state.list.length>0">
          <img src="../../public/img/没用选中的.png" alt="" style="margin:20px 15px;height: 30px;width: 30px;" v-show="!flag"
            @click="qvan(2)">
          <img src="../../public/img/选中.png" alt="" style="margin:20px 15px;height: 30px;width: 30px;" v-show="flag"
            @click="qvan(1)">
        </div>

      </div>

      <input type="text" class="input" placeholder="What needs to bedone?" @keydown.enter="add" v-model="input">
    </div>
    <div class="boxs" v-show="$store.state.list.length>0">
      <div class="list" v-for="(item,index) in list" :key="index">
        <input type="checkbox" class="checkbox" v-model="item.status" @change="changes(item)"><span
          :class="{aa:item.status}">{{item.title}}</span>
        <span class="ff" style="float: right;margin: 0 20px;" @click="del(item)">x</span>
      </div>
      <div class="footer">
        <div>
          <span style="margin: 0 20px;margin-right: 100px;">{{$store.state.list.filter(item => item.num == 1).length}}
            item left</span>
          <span class="span" :class="{spans:num==0}" @click="num=0">All</span>
          <span class="span" :class="{spans:num==1}" @click="num=1">Active</span>
          <span class="span" :class="{spans:num==2}" @click="num=2">Completed</span>
        </div>
        <img src="../../public/img/下.png" alt="" class="xia">
      </div>
    </div>
  </div>
</template>

<script>
import { Ref, reactive, toRefs, computed } from 'vue';
import { useStore } from 'vuex';
export default {
  setup() {
    const { state, commit } = useStore()
    const data = reactive({
      flag: false,
      input: '',
      list: [],
      num: 0,
    })
    data.flag = computed(() => {
      return state.list.filter(item => item.num == 2).length == state.list.length
    })
    data.list = computed(() => {
      if (data.num == 0) return state.list
      let obj = state.list.filter(item => item.num == data.num)
      return obj
    })
    const add = () => {
      if (data.input == '') return;
      let obj = { title: data.input, status: false, num: 1 }
      data.list.push(obj)
      data.input = ''
      commit('kong')
    }
    const changes = (item) => {
      item.num = item.num == 1 ? 2 : 1
      commit('kong')

    }
    const del = (item) => {

      let i = state.list.findIndex(items => items == item)
      console.log(i);
      state.list.splice(i, 1)
      commit('kong')

    }
    const qvan = (i) => {
      data.list.forEach(element => {
        element.num = i
        element.status = i == 1 ? false : true
      });
      commit('kong')
    }
    return { ...toRefs(data), add, changes, del, qvan }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  height: 70px;
  margin: 100px auto;
  margin-bottom: 3px;
  border: none;
  outline: none;
  background-color: #fff;
  box-shadow: 2px 2px 4px rgb(212, 209, 209);
  display: flex;
}

.input {
  width: 430px;
  height: 70px;
  border: none;
  outline: none;
  font-size: 26px;
}

.input::placeholder {
  color: #e6e6e6;
  font-style: oblique;
}

.boxs {
  width: 500px;
  margin: auto;
  background-color: #fff;
  box-shadow: 2px 2px 4px rgb(212, 209, 209);
  color: #777777;
  position: relative;
}

.xia {
  position: absolute;
  bottom: -14px;
  width: 100%;

}

.footer {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.span {
  display: inline-block;
  padding: 2px 5px;
  margin: 6px 6px;
  line-height: 20px;
  box-sizing: border-box;
}

.spans {
  border: 1px solid #ead7d7;
  box-sizing: border-box
}

.checkbox {
  width: 50px;

}

.list {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}

.list:hover .ff {
  display: inline-block;
}

.ff {
  display: none;
}

.aa {
  text-decoration: line-through;
  color: #ccc
}
</style>